<template>
  <div :id="id?id:'monaco-container'" class="id-monaco-container" />
</template>

<script>
// main.ts 设置全局变量
// import * as monaco from 'monaco-editor'
import SQLSnippets from "./snippets";
// 设置为中文
export default {
  name: "App",
  props: {
    id: {
      type: String,
      required: false
    },
    type: {
      type: String,
      required: false
    },
    value: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      monacoEditor: null,
      sqlSnippets: null
    };
  },
  async mounted() {
    // TODO 执行通用
    // let monaco = require('common.js')
    // 执行通用配置
    this.initEditor();
    const dbSchema = await this.getDbSchema();
    this.sqlSnippets.setDbSchema(dbSchema);
    // 根据type执行定制配置
    if (this.type === "history") {
      // TODO 设置不可编辑
      // let require('xxx.js')
    } else if (this.type === "smart-editor") {
    } else if (this.type === "smart-test") {
    }
    // monaco.xxx()
    // monaco.xxx()
  },
  methods: {
    /**
     * 初始化编辑器
     */
    initEditor() {
      console.log('渲染编辑器....',Math.random())
      // 实例化snippets
      this.sqlSnippets = new SQLSnippets(this.$monaco, ["${ }"], () => {
        return [];
      });
      // 设置编辑器主题
      // monaco.editor.setTheme('vs-dark')
      // 设置编辑器语言
      this.$monaco.languages.registerCompletionItemProvider("sql", {
        triggerCharacters: [" ", ".", "$"],
        provideCompletionItems: (model, position) =>
          this.sqlSnippets.provideCompletionItems(model, position)
      });

      // 初始化编辑器
      this.monacoEditor = this.$monaco.editor.create(
        document.getElementById(this.id ? this.id : "monaco-container"),
        {
          value: this.value,
          language: "sql",
          wordWrap: "wordWrapColumn", // 换行，40个字符换一行
          wordWrapColumn: 40,
          // Set this to false to not auto word wrap minified files
          wordWrapMinified: true,
          // try "same", "indent" or "none" 换行缩进方式
          wrappingIndent: "same",

          minimap: {
            enabled: true
          },
          suggestOnTriggerCharacters: true
        }
      );

      // 监听变化
      this.monacoEditor.onDidChangeModelContent(e => {
        this.caretOffset = e.changes[0].rangeOffset; // 获取光标位置
        this.$emit("input", this.monacoEditor.getValue());
      });
    },
    /**
     * TODO 获取数据库表及表字段
     */
    getDbSchema() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve([
            {
              dbName: "db_bar",
              tables: [
                {
                  tableName: "user",
                  tableColumns: [
                    {
                      fieldName: "username"
                    }
                  ]
                },
                {
                  tableName: "log",
                  tableColumns: []
                },
                {
                  tableName: "goods",
                  tableColumns: []
                }
              ]
            },
            {
              dbName: "db_foo",
              tables: [
                {
                  tableName: "price",
                  tableColumns: []
                },
                {
                  tableName: "time",
                  tableColumns: []
                },
                {
                  tableName: "updata_user",
                  tableColumns: []
                }
              ]
            }
          ]);
        }, 200);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
#monaco-container,
.id-monaco-container {
  display: block !important;
  width: 100%;
  height: 100%;
  flex: 1 !important;

  ::v-deep .monaco-editor {
    height: 100% !important;
  }
}
</style>